import { type ReactNode, type FC, type MutableRefObject, useRef } from "react";
import useMedium from "@/hooks/useMedium";
import { useLocation } from "react-router-dom";
import SlideMove from "../SlideMove";
import RightIn from "../Transition/rightIn/index";
import { useOutlet } from "react-router-dom";
import Page from "./page/index";
interface Props {
  children: ReactNode;
  elRef: MutableRefObject<HTMLDivElement>;
}
const LayoutChangeByMeminfo: FC<Props> = props => {
  const outlet = useOutlet();
  const { Meduinfo } = useMedium();
  const location = useLocation();
  const sideRef = useRef<HTMLDivElement>(null);
  return (
    <>
      <SlideMove
        elRef={props.elRef}
        sideRef={sideRef}
        changewidth={true}
        maxWidth={250}
        minWidth={180}
        style={
          !Meduinfo.ismobile && Meduinfo.windowWdith >= 640
            ? " sm:w-1/3"
            : " w-full"
        }
      >
        <div className="h-full w-[99%] relative flex flex-col">
          {props.children}
          {(Meduinfo.ismobile || Meduinfo.windowWdith < 640) &&
          location.pathname.slice(1, location.pathname.length - 1).split("/")
            .length > 2 &&
          outlet ? (
            <RightIn>
              <div className="h-full w-full absolute top-0 left-0 z-20 bg-white">
                {outlet}
              </div>
            </RightIn>
          ) : (
            <></>
          )}
        </div>
      </SlideMove>
      {!Meduinfo.ismobile && Meduinfo.windowWdith >= 640 ? (
        <div className="h-full w-full " ref={sideRef}>
          {outlet ? (
            <RightIn>{outlet}</RightIn>
          ) : (
            <>
              <Page></Page>
            </>
          )}
        </div>
      ) : (
        <></>
      )}
    </>
  );
};

export default LayoutChangeByMeminfo;
